<template>
  <view class="page_root" data-page-name="考试" data-page-identification="f_vauuv3n5t0">
    <!-- UNI_APP_EXEGESIS_START NAVIGATION_TEMPLATE UNI_APP_EXEGESIS_END -->
    <!-- begin vid_3v8qyxf52i 自定义模板_f8ubxtpyu8 -->
    <u-mask :show="taskState.loadingShow" @click="show = false">
      <view
        style="height: 100px; width: 100px;position: absolute; top: 50%; left: 50%;transform: translate(-50%, -50%);">
        <u-loading :color="'red'" mode="semicircle" textSize="50" :show="taskState.loadingShow" size="100"></u-loading>
        <view v-if="taskState.loadingShow" style="color: #fff;">正在交卷....</view>
      </view>
    </u-mask>
    <view class="main">
      <view class="bgc-img"></view>
      <view class="top-tip">
        <view class="top-icon"><u-icon name="info-circle-fill" color="#F7B500" size="24px"></u-icon></view>
        <view class="top-content">
          确认学习完成后请您点击考试进行测试，考试不合格将通知项目总监并扣除个人最终绩效分数。要求一次与学习内容一字不差。
        </view>
      </view>
      <view class="main-content">
        <view class="tabs" v-if="taskState && taskState.questionList && taskState.questionList.phenomenonList">
          <view class="tabs-item" v-for="(item, index) in taskState.questionList.phenomenonList" :key="index"
            :class="{ active: taskState.current === index }" @click="tabChange(index)">题目{{ index + 1 }}
            <view class="indicator" v-if="taskState.current === index"></view>
          </view>
        </view>
        <view v-if="taskState && taskState.questionList && taskState.questionList.phenomenonList" class="question-item"
          v-for="(item, index) in taskState.questionList.phenomenonList" :key="index"
          :class="{ show: index === taskState.current }">
          <view class="question-top-main">
            <span class="question-item-icon"><svg xmlns="http://www.w3.org/2000/svg"
                xmlns:xlink="http://www.w3.org/1999/xlink" width="16px" height="16px" viewBox="0 0 16 16" version="1.1">
                <title>问题现象</title>
                <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                  <g id="开始学习" transform="translate(-30, -265)" fill="#F5222D" fill-rule="nonzero">
                    <g id="问题现象" transform="translate(30, 265)">
                      <path
                        d="M8,16 C9.51690821,16 10.9352657,15.5768116 12.1429952,14.8444444 L16,16 L14.4154589,12.7806763 C15.410628,11.447343 16,9.79130435 16,8 C16,3.5826087 12.4173913,0 8,0 C3.5826087,0 0,3.5826087 0,8 C0,12.4173913 3.5826087,16 8,16 Z M5.0589372,6.30144928 C5.0763285,5.65410628 5.15362319,5.16135266 5.28888889,4.82318841 C5.42415459,4.48502415 5.64057971,4.18357488 5.93623188,3.91884058 C6.23381643,3.65410628 6.56425121,3.45700483 6.92753623,3.33140097 C7.29082126,3.2057971 7.67729469,3.14202899 8.08115942,3.14202899 C8.90048309,3.14202899 9.58067633,3.38357488 10.1256039,3.8647343 C10.6705314,4.34589372 10.9429952,4.98743961 10.9429952,5.78743961 C10.9429952,6.1468599 10.87343,6.47342995 10.7342995,6.76521739 C10.5951691,7.05700483 10.2975845,7.42222222 9.84347826,7.8589372 C9.38937198,8.29565217 9.08792271,8.60483092 8.93913043,8.79033816 C8.79033816,8.97391304 8.67826087,9.1942029 8.60096618,9.45120773 C8.5236715,9.70821256 8.49082126,10.0521739 8.50048309,10.4830918 L7.31207729,10.4830918 C7.31207729,9.97874396 7.352657,9.57681159 7.43381643,9.27536232 C7.51497585,8.97391304 7.63671498,8.71111111 7.79903382,8.48502415 C7.96135266,8.26086957 8.2531401,7.92850242 8.6763285,7.49371981 C9.09951691,7.05700483 9.37198068,6.74009662 9.49371981,6.54299517 C9.61545894,6.34589372 9.67536232,6.05024155 9.67536232,5.65990338 C9.67536232,5.26763285 9.53623188,4.92173913 9.25797101,4.62028986 C8.97971014,4.31884058 8.57391304,4.16811594 8.04251208,4.16811594 C6.84637681,4.16811594 6.247343,4.87922705 6.247343,6.29951691 L5.0589372,6.29951691 L5.0589372,6.30144928 L5.0589372,6.30144928 Z M8.59323671,12.9545894 L7.28502415,12.9545894 L7.28502415,11.578744 L8.59323671,11.578744 L8.59323671,12.9545894 Z"
                        id="形状" />
                    </g>
                  </g>
                </g>
              </svg></span>
            <span class="question-title">问题现象</span>
            <view class="h1-title  top-text-15">项目发现方</view>
            <view class="h2-title">{{ item.discoveredBy }}</view>
            <view class="h1-title  top-text-15">具体现象</view>
            <view class="h2-title">{{ item.phenomenon }}</view>
            <view class="h1-title  top-text-15">导致结果</view>
            <view class="h2-title">{{ item.result }}</view>
            <view class="question-bottom top-text-15" v-for="(item, index) in item.reasonResolveSopList " :key="index">
              <view class="question-bottom-inner">
                <view class="question-bottom-title">可能原因</view>
                <view class="h1-title top-text-8">项目发现方</view>
                <view class="h2-title" v-html="formatText(item.reason.phenomenonReason)" />
                <view v-if="item.reason.phenomenonReasonOptionList" class="question-option-body">
                  <view class="question-option-item" v-for="(item, index) in item.reason.phenomenonReasonOptionList"
                    :key="index">{{ item }}</view>
                </view>
                <view class="h1-title top-text-8">可能原因</view>
                <view class="h2-title" v-html="formatText(item.reason.possibleReason)"></view>
                <view v-if="item.reason.possibleReasonOptionList" class="question-option-body">
                  <view class="question-option-item" v-for="(item, index) in item.reason.possibleReasonOptionList"
                    :key="index">{{ item }}</view>
                </view>
                <view class="h1-title top-text-8">原因特征</view>
                <view class="h2-title" v-html="formatText(item.reason.reasonFeature)"></view>
                <view v-if="item.reason.reasonFeatureOptionList" class="question-option-body">
                  <view class="question-option-item" v-for="(item, index) in item.reason.reasonFeatureOptionList"
                    :key="index">{{ item }}</view>
                </view>
                <view class="question-bottom-title-bottom">解决SOP和标准动作</view>
                <view class="h1-title top-text-8">执行目标</view>
                <view class="h2-title" v-html="formatText(item.resolveSop.executionTarget)" />
                <view v-if="item.resolveSop.executionTargetOptionList" class="question-option-body">
                  <view class="question-option-item" v-for="(item, index) in item.resolveSop.executionTargetOptionList"
                    :key="index">{{ item }}</view>
                </view>
                <view class="h1-title top-text-8">执行方案</view>
                <view class="h2-title" v-html="formatText(item.resolveSop.plan)"></view>
                <view v-if="item.resolveSop.planOptionList" class="question-option-body">
                  <view class="question-option-item" v-for="(item, index) in item.resolveSop.planOptionList"
                    :key="index">{{ item }}</view>
                </view>
                <view class="h1-title top-text-8">达成标准</view>
                <view class="h2-title" v-html="formatText(item.resolveSop.reachStandard)"></view>
                <view v-if="item.resolveSop.reachStandardOptionList" class="question-option-body">
                  <view class="question-option-item" v-for="(item, index) in item.resolveSop.reachStandardOptionList"
                    :key="index">{{ item }}</view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="fixed-button" @click="handleSubmit(taskState.taskId)">
        <view class="btn-father">
          交卷
          <view class="btn-tip"><span class="count">考试不通过{{ taskState.examFailNumber }}次</span></view>
        </view>
      </view>
    </view>
    <!-- end vid_3v8qyxf52i 自定义模板_f8ubxtpyu8 -->
  </view>
</template>

<script setup>

import {
  ref, reactive, toRaw, markRaw,
  watch, computed,
  onBeforeMount, onMounted, onBeforeUnmount, onUnmounted, onActivated, onDeactivated, getCurrentInstance
} from "vue";
import { useRoute } from 'vue-router';
const route = useRoute();
import { get, post, put, del, request, requestWithHeaders } from '@/utils/http/Axios';
import { cloneDeep, localGet, traversalTreeStructure, set, checkCaseCondition, throttle, merge, debounce, getGridStyle, getCellRenderAble, formulaStrategy } from '@/utils/index';
import { isEqual, isNullOrEmpty, isEmptyArr, isArray, isEmpty, isNullOrUnDef, isContained } from '@/utils/is';
import { CovertOptions, getChartsDataSourceConvert } from '@/utils/chart';
import { propertyFormatByNumber, propertyFormatByPercentage, propertyFormatByDate } from '@/utils/format';
import { FormFormat } from '@/utils/formFormat'
import { customAddWaterMarkFunc, generateWaterMarkText } from '@/utils/addWaterMark';
import dayjs from 'dayjs';
import hashSum from 'hash-sum';
import { handleRedirect } from '@/utils/common';
/*** UNI_APP_EXEGESIS ***
import { handleRedirect, permission, parseJson } from '@/utils/common';
import { onPullDownRefresh, onLoad, onReady, onShow, onHide, onPageScroll, onUnload } from '@dcloudio/uni-app';
import { BroadcastMessage } from '@/utils/BroadcastMessage';
import { sendToken } from "@/hooks/useIframeToken";
*** UNI_APP_EXEGESIS ***/


// ---------------------------- 属性定义 ----------------------------
const sourceId = "page3000000332"

// 是否显示菜单按钮
const isMenuIconShow = false;
// NAVIGATION_MENU
const handleShowNavigation = () => { };

let isProcessState = ref(false);


const setTimeOutList = [];


const vid_3v8qyxf52i_props = reactive({
  code: "",
});



// ============================ 属性定义 ============================

// ---------------------------- 元素数据引用 ----------------------------
// 组件 自定义模板_f8ubxtpyu8 ref 的引用
const vid_3v8qyxf52i_ref = ref(null);
// 动态key的map
const fieldTypeMap = {};
// 动态key的map
const refMap = { vid_3v8qyxf52i_ref };

const showState = reactive({
  vid_3v8qyxf52i_visible: true,
})
// ============================ 元素数据引用 ============================

// ---------------------------- 数据 ----------------------------


// ============================ 数据 ============================

// ---------------------------- 方法 ----------------------------
// ---------------------------- 页面数据 ----------------------------


// ============================ 页面数据 ============================

// ---------------------------- 响应 ----------------------------

// ============================ 响应 ============================

// ---------------------------- 函数 ----------------------------

// 自定义函数 返回上一页
const customFunction_goBack_rvuc19nhjw = (...params) => {
  uni.navigateBack()
}

// ============================ 函数 ============================

// ---------------------------- 页面参数 ----------------------------

const pageParameter_state = reactive({
  'processInstanceId': undefined,
})

// ============================ 页面参数 ============================

// ---------------------------- 组件事件处理方法 ----------------------------


// ============================ 组件事件处理方法 ============================

// ============================ 方法 ============================

// ---------------------------- 生命周期 ----------------------------
/*** UNI_APP_EXEGESIS ***
  // 获取上一层传递的数据
  const workflowChannel = new BroadcastMessage('WORKFLOW');
  workflowChannel.publish({ status: 'Ready' });
  workflowChannel.subscribe((data) => {
    if (data) {
      isProcessState.value = (window.self !== window.parent && data.type === 'hideHeader');
    }
  });
  *** UNI_APP_EXEGESIS ***/


const pageScrollTop = ref(0)

// *** PREVIEW_EXEGESIS ***
onMounted(() => {
  setPageParams(route.query)
  // 设置表单的rule
  try {

  } catch {
    // do nothing
  }
});
// *** PREVIEW_EXEGESIS *** //

/*** UNI_APP_EXEGESIS ***
const routeOption = ref({})
onLoad((option) => {
routeOption.value = option;
});
onReady(() => {
setPageParams(routeOption.value)
// 设置表单的rule
try{

}catch{
    // do nothing
}
});
// 图表刷新标记
const uChartsReshowFlag = ref(false);
onHide(() => { // 页面隐藏后标记置为false(如果不置为false无法触发图表更新)
  uChartsReshowFlag.value = false
})
onShow(() => {
  uChartsReshowFlag.value = true; // 页面激活后,标记置为true

  setPageParams(routeOption.value)
})
onPageScroll(e => {
  pageScrollTop.value = e.scrollTop
});
*** UNI_APP_EXEGESIS ***/

const setPageParams = (routerParam) => {
  const pageParams = [{ "dataType": "STRING", "dependencies": [], "name": "processInstanceId" }];
  const strategyMap = {
    STRING: (param, paramValue) => {
      pageParameter_state[param.name] = paramValue;
    },
    BOOLEAN: (param, paramValue) => {
      if ('true' === (paramValue || '').toLowerCase()) {
        pageParameter_state[param.name] = true
      } else if ('false' === (paramValue || '').toLowerCase()) {
        pageParameter_state[param.name] = false
      } else {
        // TODO: 是否要支持toast
        console.error('参数传入错误！类型不匹配！');
      }
    },
    NUMBER: (param, paramValue) => {
      if (!isNaN(paramValue)) {
        pageParameter_state[param.name] = Number(paramValue);
      } else {
        // TODO: 是否要支持toast
        console.error('参数传入错误！类型不匹配！');
      }
    },
    ARRAY: (param, paramValue) => {
      if (isNullOrUnDef(paramValue) || !paramValue || paramValue === 'undefined') { // default value
        pageParameter_state[param.name] = [];
      } else if (paramValue.trim().startsWith('[') && paramValue.trim().endsWith(']')) {
        try {
          pageParameter_state[param.name] = JSON.parse(decodeURI(paramValue));
        } catch (error) {
          console.error('参数解析失败 ', error);
        }
      } else {
        console.error('参数传入错误！类型不匹配！');
      }
    },
  };
  pageParams.forEach((param) => {
    strategyMap[param.dataType](param, routerParam[param.name])
  });


}

onUnmounted(() => {
  // 销毁定时器
  setTimeOutList.forEach(({ repeat, timer }) => {
    repeat ? clearInterval(timer) : clearTimeout(timer);
  });
});


/*** UNI_APP_EXEGESIS ***
onPullDownRefresh(() => {
// 下拉刷新
setTimeout(() => {
    uni.stopPullDownRefresh()
}, 1000)
})
*** UNI_APP_EXEGESIS ***/

// ============================ 生命周期 ============================

// ---------------------------- 数据关联处理 ----------------------------
// ---------------------------- 组件数据同步 ----------------------------

// ============================ 组件数据同步 ============================
//
// ============================ 数据关联处理 ============================

// ---------------------- 不同组件自定义的处理逻辑 ---------------------

// ====================== 不同组件自定义的处理逻辑 ======================


// ================================定制化逻辑========================================

onMounted(() => {
  let appDiv = document.querySelector('#app')
  appDiv.style.background = 'linear-gradient(180deg, #E1EFFD 100%, #ffffff 0%)';
  let topHeader = document.querySelector('.uni-page-head');
  if (topHeader) topHeader.remove()
  let bottomTab = document.querySelector('.vid_dur3o27gyj')
  if (bottomTab) bottomTab.remove()
  // 获取当前 URL 中问号后的参数部分
  const queryString = window.location.search

  // 使用 URLSearchParams 解析参数字符串
  const urlParams = new URLSearchParams(queryString)

  // 遍历参数并输出
  urlParams.forEach((value, key) => {
  })
  const taskId = urlParams.get('id')
  taskState.taskId = taskId
  // 获取任务详情
  get(`/solution-ppm/api/v2/built-in-system-ppm/dashboard/task/${taskId}`).then(({ data }) => {
    taskState.examFailNumber = data?.examFailNumber || 0
    handleGetQuestionList()
  })
})
const taskState = reactive({
  isExam: false,
  taskId: '',
  questionList: [],
  tabList: [],
  current: 0,
  showData: {
  },
  examFailNumber: 0,
  loadingShow: false
})

function tabChange(index) {
  taskState.current = index;
}
const formatText = (text) => {
  // 这里放置文本格式化的逻辑
  return text?.replace(/\n/g, '<br>');
};

function handleGetQuestionList() {
  get(`/solution-ppm/api/v2/built-in-system-ppm/project/task_question/${taskState.taskId}/exam`).then(res => {
    taskState.questionList = res.data;
    taskState.questionList.phenomenonList[0].reasonResolveSopList.forEach((phenomenonItem, index) => {
      const reg = /(?<={).*?(?=})/g;
      const reason = phenomenonItem.reason;
      const resolveSop = phenomenonItem.resolveSop;
      for (const key in reason) {
        let value = reason[key];
        if (value && typeof (value) == "string") {
          const arr = value.match(reg);
          if (arr) {
            arr.map((k, i) => {
              value = value.replace(new RegExp('\\{' + k + '\\}',), '<div id="' + 'f' + index + key + i + '" contenteditable style="display:inline-block;padding:0 5px;text-align:center;min-width:30px;outline: none;border-bottom:1px solid black "></div>');
            })
          }
        }
        reason[key] = value;
      }

      for (const key in resolveSop) {
        let value = resolveSop[key];
        if (value && typeof (value) == "string") {
          const arr = value.match(reg);
          if (arr) {
            arr.map((k, i) => {
              value = value.replace(new RegExp('\\{' + k + '\\}',), '<div id="' + 'f' + index + key + i + '" contenteditable style="display:inline-block;padding:0 5px;text-align:center;min-width:30px;outline: none;border-bottom:1px solid black "></div>');
            })
          }
        }
        resolveSop[key] = value;
      }

    });
  })
  return
}
// function handleSubmit(id) {
//   const reg1 = /<div[^>]*>([\s\S]*?)<\/div>/;
//   const aa = cloneDeep(taskState.questionList).map((phenomenonItem, index) => {
//     phenomenonItem.reasonResolveSopList.forEach(reasonResolveSopItem => {
//       console.log(index, 'indexasdasdsa');
//       const reason = reasonResolveSopItem.reason;
//       const resolveSop = reasonResolveSopItem.resolveSop;

//       for (const key in reason) {
//         console.log(key);
//         let value = reason[key];
//         if (value && typeof (value) == "string") {
//           const arr = value.match(reg1);
//           if (arr) {
//             arr.map((k, i) => {
//               value = value.replace(reg1, document.querySelector(`#${'f' + index + key + i}`)?.innerText.trim() || '');
//             })
//           }
//         }
//         reason[key] = value;
//       }

//       for (const key in resolveSop) {
//         let value = resolveSop[key];
//         if (value && typeof (value) == "string") {
//           const arr = value.match(reg1);
//           if (arr) {
//             arr.map((k, i) => {
//               value = value.replace(reg1, document.querySelector(`#${'f' + index + key + i}`)?.innerText.trim() || '');
//             })
//           }
//         }
//         resolveSop[key] = value;
//       }
//     });
//     return phenomenonItem;
//   });
//   taskState.loadingShow = true
//   post(`/solution-ppm/api/v2/built-in-system-ppm/project/task_question/${taskState.taskId}/exam/submit`, { phenomenonList: aa }).then(res => {
//     console.log(res.data);
//     if (res.code === 200) {
//       if (res.data.taskExamStatus === '已通过') {
//         uni.showToast({
//           title: '考试通过，请及时完成任务',
//           icon: 'success'
//         });
//         handleRedirect(`/pages/Page3000000251/Page3000000251`)
//         taskState.loadingShow = false
//       } else {
//         uni.showToast({
//           title: '考试不通过请重新开始学习',
//           icon: 'error'
//         });
//         taskState.loadingShow = false
//         handleRedirect(`/pages/Page3000000332/Page3000000332?id=${taskState.taskId}`)
//       }
//     } else {
//       uni.showToast({
//         title: '未知错误',
//         icon: 'error'
//       });
//       taskState.loadingShow = false
//     }

//   })
// }

function handleSubmit() {
  const reg1 = /<div[^>]*>([\s\S]*?)<\/div>/;
  const reg2 = /(.*)(<div[^>]*>.*<\/div>)(.*)/
  const aa = cloneDeep(taskState.questionList.phenomenonList[0].reasonResolveSopList).map((phenomenonItem, index) => {
    const reason = phenomenonItem.reason;
    const resolveSop = phenomenonItem.resolveSop;

    for (const key in reason) {
      let value = reason[key];
      if (value && typeof (value) == "string") {
        const arr = value.match(reg1);
        if (arr) {
          arr.map((k, i) => {
            value = value.replace(reg1, 'start'+document.querySelector(`#${'f' + index + key + i}`)?.innerText.trim()+'end' || '');
          })
        }
      }
      reason[key] = value;
    }
  
    for (const key in resolveSop) {
      let value = resolveSop[key];
      if (value && typeof (value) == "string") {
        const arr = value.match(reg1);
        if (arr) {
          arr.map((k, i) => {
            value = value.replace(reg1, 'start'+document.querySelector(`#${'f' + index + key + i}`)?.innerText.trim()+'end' || '');
          })
        }
      }
      resolveSop[key] = value;
    }

    return phenomenonItem;
  });

  const answerList = []
  aa.forEach(obj => {
    const questionId = obj.questionId;
    const answerArray = [];

    // 遍历每一个对象的原因和解决方案
    for (const key in obj) {
        if (obj.hasOwnProperty(key)) {
            const section = obj[key];
            for (const prop in section) {
                if (section.hasOwnProperty(prop) && typeof section[prop] === 'string') {
                    const text = section[prop];
                    const matches = text.match(/start(.*?)end/g);
                    if (matches) {
                        matches.forEach(match => {
                            const answer = match.replace('start', '').replace('end', '');
                            answerArray.push(answer);
                        });
                    }
                }
            }
        }
    }

    answerList.push({ questionId: questionId, answerList: answerArray });
    console.log(answerList,'answerList');
});
}
</script>

<style lang="less" scoped>
.page_root {
  min-height: 100%;
  box-sizing: border-box;
}

.page_root {
  min-height: 100%;
  box-sizing: border-box;
  background: linear-gradient(180deg, #E1EFFD 100%, #ffffff 0%);
}

.main {
  height: calc(100vh - 50px);
  background: linear-gradient(180deg, #E1EFFD 100%, #ffffff 0%);
  padding: 15px 15px 0 15px;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  position: relative;
  overflow: auto;
  padding: 15px;
}

.bgc-img {
  position: absolute;
  width: 100%;
  height: 300px;
  left: 0;
  top: -180px;
  background-image: url('http://10.40.0.33:9001/file-storage/416680575854426112.png');
  background-size: cover;
}

.top-tip {
  background: #FFFBE6;
  border: 1px solid #FFE58F;
  border-radius: 2px;
  display: flex;
  width: 100%;
  height: 80px;
  position: relative;
  padding: 10px;
}



.top-icon {
  width: 10%;
}

.top-content {
  flex: 1;
  font-family: PingFangSC-Regular;
  font-size: 14px;
  color: #262626;
  letter-spacing: 0;
  text-align: justify;
  font-weight: 400;
  line-height: 1.4;
}

.main-content {
  margin-top: 15px;
  border-radius: 6px 6px 0 0;
}

.tabs {
  width: 100%;
  display: flex;
  background: #FFFFFF;
  box-shadow: 0 4px 10px 0 #CFE7FF;
  border-radius: 6px 6px 0 0;
  height: 50px;
  padding: 12px 16px;
  overflow-x: auto;
  /* 添加水平滚动 */
  white-space: nowrap;
  /* 防止换行 */
}

.tabs-item {
  position: relative;
  width: 25%;
  font-family: PingFangSC-Regular;
  font-size: 14px;
  color: #595959;
  font-weight: 400;
  height: 20px;
  line-height: 30px;
  font-weight: 600;
  text-align: center;
  margin-right: 10px;
}

.indicator {
  top: 25px;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 50%;
  /* Adjust the width of the indicator according to your design */
  height: 1px;
  /* Adjust the height of the indicator according to your design */
  background-color: #0078FF;
  display: none;
  /* Initially hide the indicator */
  border: 1px solid #0078FF;
}

.active .indicator {
  display: block;
  /* Display the indicator when tabs-item has active class */
}

.active {
  font-family: PingFangSC-Medium;
  font-size: 14px;
  color: #0078FF;
  font-weight: 600;
}

.question-item {
  background: #FFFFFF;
  box-shadow: 0 0 10px 0 #CFE7FF;
  border-radius: 6px;
  padding: 15px;
  display: none;
}

.question-title {
  font-family: PingFangSC-Semibold;
  font-size: 16px;
  color: #F5222D;
  font-weight: 600;
  margin-left: 8px;
}

.question-top-main {
  line-height: 22px;
}

.question-item-icon {
  position: relative;
  top: 2px;
}

.top-text-15 {
  margin-top: 15px;
}

.top-text-12 {
  margin-top: 12px;
}

.top-text-16 {
  margin-top: 16px;
}

.top-text-8 {
  margin-top: 8px;
}

.h1-title {
  font-family: PingFangSC-Regular;
  font-size: 14px;
  color: #008BFF;
  font-weight: 400;
}

.question-bottom {
  background: #FFFFFF;
  box-shadow: 0 0 10px 0 #CFE7FF;
  border-radius: 3px;
  overflow: hidden;
}

.question-bottom-inner {
  border: 2px solid;
  border-image: linear-gradient(360deg, rgba(41, 129, 223, 0) 0%, rgba(41, 129, 223, 1) 100%) 3 3 3 3;
  padding: 16px;
  height: 100%;
}

.question-bottom-title {
  position: relative;
  ;
  left: -16px;
  width: 100%;
  height: 28px;
  background-image: linear-gradient(90deg, #CDE8FD 0%, rgba(205, 232, 253, 0.00) 100%);
  font-family: PingFangSC-Semibold;
  font-size: 14px;
  color: #262626;
  font-weight: 600;
  line-height: 28px;
  padding: 0 14px;
}

.question-bottom-title-bottom {
  position: relative;
  ;
  left: -16px;
  width: 100%;
  height: 28px;
  background-image: linear-gradient(90deg, #CDE8FD 0%, rgba(205, 232, 253, 0.00) 100%);
  font-family: PingFangSC-Semibold;
  font-size: 14px;
  color: #262626;
  font-weight: 600;
  line-height: 28px;
  padding: 0 14px;
  margin-bottom: 20px;
  top: 20px;
}

.fixed-button {
  position: fixed;
  height: 52px;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #1777FF;
  color: #fff;
  font-size: 20px;
  font-weight: 600;
  text-align: center;
  border: none;
  border-radius: 0;
  z-index: 12;
  line-height: 52px;
  font-family: PingFangSC-Semibold;
  font-size: 20px;
  color: #FFFFFF;
  letter-spacing: 0;
  font-weight: 600;
}

.btn-tip {
  background: #FFFFFF;
  border-radius: 10px 10px 10px 0;
  width: 90px;
  height: 18px;
  position: absolute;
  top: 5px;
  right: -90px;
  display: flex;
  /* 添加 flex 属性 */
  justify-content: center;
  /* 水平居中 */
  align-items: center;
  /* 垂直居中 */
}

.count {
  display: inline-block;
  font-family: PingFangSC-Regular;
  font-size: 12px;
  color: #F5222D;
  text-align: center;
  /* 将 text-align 属性修改为 center */
  font-weight: 400;
}


.btn-father {
  margin: 0 auto;
  width: 40px;
  position: relative;
}

.show {
  display: block;
}

.question-option-body {
  margin: 8px 0;
  display: flex;
  justify-content: space-between;
}

.question-optionp-item {
  font-family: PingFangSC-Regular;
  font-size: 14px;
  color: #262626;
  text-align: justify;
  font-weight: 400;
  width: 30%;
}
</style>
